<template>
  <el-table
    :data="data"
    border
    style="width: 100%"
    :row-style="showTr">
    <el-table-column v-for="(column, index) in columns" :key="column.dataIndex"
                     :label="column.text" align="left">
      <template scope="scope">
        <span v-if="spaceIconShow(index)" v-for="(space, levelIndex) in scope.row._level" class="ms-tree-space"></span>
        <button class="c-button" v-if="toggleIconShow(index,scope.row)" @click="toggle(scope.$index)">
          <i :class="!scope.row._expanded?'el-icon-plus':'el-icon-minus'"
             :title="!scope.row._expanded?'expand':'collapse'" aria-hidden="true"></i>
        </button>
        <span v-else-if="index===0" class="ms-tree-space"></span>
        <template v-if="index ===0">
          &nbsp;<i :class="scope.row.icon" aria-hidden="true">
          <template v-if="column.dataIndex ==='url'">
          <a :href="scope.row[column.dataIndex]" target="_blank">{{scope.row[column.dataIndex]}}</a>
          </template>
          <template v-if="column.dataIndex ==='type'">
            {{scope.row[column.dataIndex]===0?'页面权限':'接口权限'}}
          </template>
          <template v-else>
           {{scope.row[column.dataIndex]}}
          </template></i>
        </template>
        <template v-else>
          <template v-if="column.dataIndex ==='url'">
            <a :href="scope.row[column.dataIndex]" target="_blank">{{scope.row[column.dataIndex]}}</a>
          </template>
          <template v-if="column.dataIndex ==='type'">
           {{scope.row[column.dataIndex]===0?'页面权限':'接口权限'}}
          </template>
          <template v-else>
           {{scope.row[column.dataIndex]}}
          </template>
        </template>
      </template>
    </el-table-column>
    <el-table-column label="操作" v-if="treeType === 'normal'" width="260" align="center">
      <template scope="scope">
        <el-button
          v-if="showEdit(scope.row)"
          type="warning"
          size="mini"
          @click="handleEdit(scope.$index, scope.row, scope.row.id)">编辑
        </el-button>
        <el-button v-if="showAddChild(scope.row)"
                   type="success"
                   size="mini" icon="el-icon-arrow-down"
                   @click="handleChild(scope.$index, scope.row,scope.row.parent)">{{addChildDesc}}
        </el-button>
        <el-button v-if="showAddFolder"
                   type="primary"
                   size="mini" icon="el-icon-arrow-down"
                   @click="handleAddFolder(scope.$index, scope.row,scope.row.parent)">创建目录
        </el-button>
        <el-button
          type="danger"
          size="mini"
          @click="handleDelete(scope.$index, scope.row, scope.row.id)">删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
  import Utils from '../utils/index.js'
  export default {
    name: 'tree-grid',
    props: {
// 该属性是确认父组件传过来的数据是否已经是树形结构了，如果是，则不需要进行树形格式化
      treeStructure: {
        type: Boolean,
        default: function () {
          return false
        }
      },
// 这是相应的字段展示
      columns: {
        type: Array,
        default: function () {
          return []
        }
      },
// 这是数据源
      dataSource: {
        type: Array,
        default: function () {
          return []
        }
      },
// 这个作用是根据自己需求来的，比如在操作中涉及相关按钮编辑，删除等，需要向服务端发送请求，则可以把url传过来
      requestUrl: {
        type: String,
        default: function () {
          return ''
        }
      },
// 这个是是否展示操作列
      treeType: {
        type: String,
        default: function () {
          return 'normal'
        }
      },
// 是否默认展开所有树
      defaultExpandAll: {
        type: Boolean,
        default: function () {
          return false
        }
      },
      addChildDesc: {
        type: String,
        default: function () {
          return '添加下级'
        }
      },
      showAddFolder: {
        type: Boolean,
        default: function () {
          return false
        }
      },
    },
    data() {
      return {
        data: []
      }
    },
    created() {
      this.loadData()
    },
    computed: {},
    methods: {
      loadData() {
        this.data = this.getData()
      },
      getData() {
        let me = this
        if (me.treeStructure) {
          let data = Utils.MSDataTransfer.treeToArray(me.dataSource, null, null, me.defaultExpandAll)
          console.log(data)
          return data
        }
        return me.dataSource
      },
      // 显示行
      showTr(row, index) {
        let show = (row.row._parent ? (row.row._parent._expanded && row.row._parent._show) : true)
        row.row._show = show
        return show ? '' : 'display:none;'
      },
      // 展开下级
      toggle(trIndex) {
        let me = this
        let record = me.data[trIndex]
        record._expanded = !record._expanded
      },
      // 显示层级关系的空格和图标
      spaceIconShow(index) {
        let me = this
        if (me.treeStructure && index === 0) {
          return true
        }
        return false
      },
      // 点击展开和关闭的时候，图标的切换
      toggleIconShow(index, record) {
        let me = this
        if (me.treeStructure && index === 0 && record.children && record.children.length > 0) {
          return true
        }
        return false
      },
      handleEdit(index, row, id) {
        this.$emit("handleEdit", index, row, id)
      },
      handleChild(index, row, parent) {
        this.$emit("handleChild", index, row, parent)
      },
      handleDelete(index, row, id) {
        this.$emit("handleDelete", index, row, id)
      },
      handleAddFolder(index, row, id) {
        this.$emit("handleAddFolder", index, row, id)
      },
      //如果是文件不能添加下级
      showAddChild(row) {
        if (row.folder === undefined) {
          return true
        }
        if (row.folder === 1) {
          return true
        }
        return false
      },
      //如果是文件夹不能编辑
      showEdit(row) {
        return this.showAddChild(row)
      }
    }
  }
</script>
<style scoped>
  .ms-tree-space {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    width: 18px;
    height: 14px;
  }

  .ms-tree-space::before {
    content: ""
  }

  table td {
    line-height: 26px;
  }

  .c-button {
    cursor: pointer;
    color: #409eff;
    background-color: #fff;
    border: 1.5px solid #409eff;
    -webkit-appearance: none;
    text-align: center;
    box-sizing: border-box;
    outline: none;
    margin: 0;
    transition: .1s;
    font-weight: 500;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    font-size: 12px;
    width: 18px;
    height: 18px;
    padding: 0px;
    border-radius: 2px;
  }
</style>
